CSS-in-JS (Styled-components) 教程

1. 简介

CSS-in-JS 是一种将 CSS 样式直接嵌入到 JavaScript 代码中的技术。Styled-components 是其中最流行的库之一，它允许你在 React 组件中编写 CSS 样式，同时保持样式与组件的紧密耦合。

1.1 为什么选择 Styled-components？

• 组件化样式：样式与组件紧密结合，易于维护和重用。
• 动态样式：可以根据组件的状态动态生成样式。
• 自动前缀：自动为不同浏览器添加前缀。
• 无全局样式冲突：每个样式都是唯一的，避免了全局样式冲突。

2. 环境搭建

首先，确保你已经安装了 Node.js 和 npm。然后，使用 Create React App 创建一个新的 React 项目。

npx create-react-app styled-components-demo
cd styled-components-demo

接下来，安装 styled-components 库：

npm install styled-components

3. 基本用法

3.1 创建一个简单的样式化组件

在 src 目录下创建一个新的文件 StyledButton.js：

// src/StyledButton.js
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #61dafb;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #4fa3d1;
  }
`;

export default StyledButton;

3.2 在组件中使用样式化组件

在 src/App.js 中引入并使用 StyledButton：

// src/App.js
import React from 'react';
import StyledButton from './StyledButton';

function App() {
  return (
    <div>
      <h1>Styled Components Demo</h1>
      <StyledButton>Click Me</StyledButton>
    </div>
  );
}

export default App;

3.3 运行项目

在终端中运行以下命令启动开发服务器：

npm start

打开浏览器访问 http://localhost:3000，你应该会看到一个带有样式的按钮。

4. 动态样式

Styled-components 允许你根据组件的 props 动态生成样式。

4.1 使用 Props 动态设置样式

修改 StyledButton.js，使其根据 primary 属性改变背景颜色：

// src/StyledButton.js
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: ${props => props.primary ? '#4CAF50' : '#61dafb'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: ${props => props.primary ? '#45a049' : '#4fa3d1'};
  }
`;

export default StyledButton;

4.2 在组件中传递 Props

在 App.js 中传递 primary 属性：

// src/App.js
import React from 'react';
import StyledButton from './StyledButton';

function App() {
  return (
    <div>
      <h1>Styled Components Demo</h1>
      <StyledButton>Default Button</StyledButton>
      <StyledButton primary>Primary Button</StyledButton>
    </div>
  );
}

export default App;

5. 高级特性

5.1 扩展样式

你可以通过扩展已有的样式化组件来创建新的组件。

// src/StyledButton.js
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: ${props => props.primary ? '#4CAF50' : '#61dafb'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: ${props => props.primary ? '#45a049' : '#4fa3d1'};
  }
`;

const BigButton = styled(StyledButton)`
  padding: 20px 40px;
  font-size: 1.5em;
`;

export { StyledButton, BigButton };

5.2 使用主题

Styled-components 支持主题功能，允许你在整个应用中共享样式变量。

// src/theme.js
export const theme = {
  primaryColor: '#4CAF50',
  secondaryColor: '#61dafb',
  textColor: 'white',
};

在 App.js 中使用主题：

// src/App.js
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { StyledButton, BigButton } from './StyledButton';
import { theme } from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div>
        <h1>Styled Components Demo</h1>
        <StyledButton>Default Button</StyledButton>
        <StyledButton primary>Primary Button</StyledButton>
        <BigButton primary>Big Button</BigButton>
      </div>
    </ThemeProvider>
  );
}

export default App;

6. 实践练习

6.1 创建一个带有主题切换的按钮组件

1. 创建一个新的样式化组件 ThemeToggleButton，用于切换主题。
2. 使用 useState 钩子在 App.js 中管理主题状态。
3. 根据当前主题动态改变按钮的样式。

6.2 实现代码

// src/ThemeToggleButton.js
import styled from 'styled-components';

const ThemeToggleButton = styled.button`
  background-color: ${props => props.theme.primaryColor};
  color: ${props => props.theme.textColor};
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: ${props => props.theme.secondaryColor};
  }
`;

export default ThemeToggleButton;

// src/App.js
import React, { useState } from 'react';
import { ThemeProvider } from 'styled-components';
import { StyledButton, BigButton } from './StyledButton';
import ThemeToggleButton from './ThemeToggleButton';
import { theme as lightTheme } from './theme';

const darkTheme = {
  primaryColor: '#282c34',
  secondaryColor: '#61dafb',
  textColor: 'white',
};

function App() {
  const [theme, setTheme] = useState(lightTheme);

  const toggleTheme = () => {
    setTheme(theme === lightTheme ? darkTheme : lightTheme);
  };

  return (
    <ThemeProvider theme={theme}>
      <div>
        <h1>Styled Components Demo</h1>
        <StyledButton>Default Button</StyledButton>
        <StyledButton primary>Primary Button</StyledButton>
        <BigButton primary>Big Button</BigButton>
        <ThemeToggleButton onClick={toggleTheme}>
          Toggle Theme
        </ThemeToggleButton>
      </div>
    </ThemeProvider>
  );
}

export default App;

7. 总结

Styled-components 是一个强大的工具，它允许你在 React 应用中以组件化的方式管理样式。通过本教程，你学会了如何创建和使用样式化组件，动态样式，扩展样式，以及使用主题。希望你能将这些知识应用到实际项目中，提升你的开发效率和代码质量。

8. 进一步学习

• 官方文档：Styled-components 官方文档
• CSS Modules：了解如何使用 CSS Modules 管理样式。
• Tailwind CSS：探索 Tailwind CSS 如何与 React 结合使用。

继续探索和实践，你将能够更好地掌握 React 和现代前端开发技术。